<template>
  <div class="direct-shipment-con receipt-con">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" ref="filterTable" :is-show-tag="false" :isReset="false" @search="searchByVal" />
    </div>
    <div class="staticstic clearfix">
      <span>销售出库单 {{ outOrderNum }}单，销售订单{{ salerOrderNum }}单，SKU{{ skuNum }}种{{ skuOrderNum }}件</span>
      <span style="margin-left: 10px; margin-top: -2px"> <a-button type="text" @click="tableList = []">清空</a-button> </span>
    </div>
    <a-table size="mini" class="table-two-line" :expandable="{}" v-model:expandedKeys="expandedKeys" row-key="id" :loading="loading" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '600px' }">
      <template #columns>
        <a-table-column title="平台单号" #cell="{ record }" :width="120">
          <span class="highlight">{{ $extract(record, 'order.platformOrderNumber') }}</span>
        </a-table-column>
        <a-table-column title="出库单号" #cell="{ record }" :width="120">
          {{ record.outOrderNumber }}
        </a-table-column>
        <a-table-column title="店铺" #cell="{ record }" :width="120">
          <span>{{ $extract(record, 'order.shopName') }}</span>
        </a-table-column>
        <a-table-column title="仓库" #cell="{ record }" :width="120">
          {{ record.warehouseName }}
        </a-table-column>
        <a-table-column title="状态" #cell="{ record }" :width="120">
          {{ filterStatus($extract(record, 'order.status')) }}
        </a-table-column>
        <a-table-column title="收货国家" #cell="{ record }" :width="120">
          <span>{{ $extract(record, 'order.address.country') }}-{{ $extract(record, 'order.address.countryCode') }}</span>
        </a-table-column>
        <a-table-column title="省州/城市" #cell="{ record }" :width="120">
          <div>{{ $extract(record, 'order.address.stateOrRegion') }}</div>
          <div>{{ $extract(record, 'order.address.city') }}</div>
        </a-table-column>
        <a-table-column title="渠道" #cell="{ record }" :width="120">
          {{ $extract(record, 'shippingMethodName') || '--' }}
        </a-table-column>
        <a-table-column title="承运商" #cell="{ record }" :width="120">
          {{ $extract(record, 'carrier') || '--' }}
        </a-table-column>
        <a-table-column title="运单号" #cell="{ record }" :width="100">
          {{ $extract(record, 'waybillNumber') || '--' }}
        </a-table-column>
        <a-table-column title="跟踪号" #cell="{ record }" :width="100">
          <textHidden :rowsWidth="90">{{ $extract(record, 'trackingNumber') || '--' }}</textHidden>
        </a-table-column>
        <a-table-column title="下单时间" #cell="{ record }" :width="140">
          {{ $setTime($extract(record, 'order.gmtPurchase')) }}
        </a-table-column>
        <a-table-column title="承诺发货时间" #cell="{ record }" :width="140">
          <div>
            {{ $setTime($extract(record, 'order.gmtLatestShip')) }}
          </div>
          <div>
            <a-countdown :value="new Date($extract(record, 'order.gmtLatestShip')).valueOf()" :now="now" format="D 天 H 时 m 分 s 秒" />
          </div>
        </a-table-column>
        <a-table-column title="实际出库时间" #cell="{ record }" :width="140">
          {{ $setTime($extract(record, 'order.gmtShip')) }}
        </a-table-column>
        <a-table-column title="运出时间" #cell="{ record }" :width="140">
          {{ $setTime($extract(record, 'order.gmtShip')) }}
        </a-table-column>
        <a-table-column title="拣货员" #cell="{ record }" :width="100">
          {{ record.pickerName ? record.pickerName : '--' }}
        </a-table-column>
        <a-table-column title="打印" #cell="{ record }" :width="120">
          <div>出库单已打印({{ record.printOutboudBill ? record.printOutboudBill : 0 }})</div>
          <div>面单已打印({{ record.printExpressLabel ? record.printExpressLabel : 0 }})</div>
        </a-table-column>
        <a-table-column title="操作" #cell="{ record, rowIndex }" :width="60" fixed="right">
          <a-button type="text" class="fl" @click="tableList.splice(rowIndex, 1)">移除</a-button>
        </a-table-column>
      </template>
      <template #expand-row="{ record }">
        <div class="product-item">
          <div class="left">
            <div class="left-item" v-for="item of record.packageItemList" :key="item.id">
              <div>
                <ImgPopover :src="getImage(item)">
                  <template #con>
                    <img width="40" height="40" :src="getImage(item)" />
                  </template>
                </ImgPopover>
              </div>
              <div style="width: 120px; margin-left: 10px">
                <div class="highlight">
                  <TextHidden position="top" :rows="1">{{ item.asin }}</TextHidden>
                </div>
                <div class="highlight">
                  <TextHidden position="top" :rows="1">{{ item.msku }}</TextHidden>
                </div>
              </div>
              <div style="width: 130px">
                <div style="display: flex">
                  <div class="label-text">SKU：</div>
                  <div>
                    <TextHidden position="top" :rows="1" :rowsWidth="80">{{ item.productSku }}</TextHidden>
                  </div>
                </div>
                <div style="display: flex">
                  <div class="label-text">销售：</div>
                  <div>{{ item.salerName }}</div>
                </div>
              </div>
              <div style="width: 180px">
                <div style="display: flex">
                  <div class="label-text">发货数：</div>
                  <div>{{ item.qtyShipped }}</div>
                </div>
                <div style="display: flex">
                  <div class="label-text">可用库存：</div>
                  <div>{{}}</div>
                  <div class="stockout">缺货</div>
                </div>
              </div>
              <div style="width: 180px">
                <div style="display: flex">
                  <div class="label-text">包装：</div>
                  <div>
                    <TextHidden position="top" :rows="1" :rowsWidth="80">包装1</TextHidden>
                  </div>
                </div>
                <div style="display: flex">
                  <div class="label-text">包装库存：</div>
                  <div>222</div>
                  <div class="stockout">缺货</div>
                </div>
              </div>
              <div>
                <div class="label-text">备注：</div>
                <div>
                  <div class="fl">
                    <textHidden :rowsWidth="90">{{ item.remark }}</textHidden>
                  </div>
                  <!-- <span class="highlight fl" style="display: inline-block; margin-left: 5px; cursor: pointer"><icon-edit /></span> -->
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div style="display: flex">
              <div class="label-text" style="width: 70px">买家留言：</div>
              <div style="width: 230px">
                <span>{{ $extract(record, 'order.buyerLeaveMessage') }}</span>
              </div>
            </div>
            <div style="display: flex">
              <div class="label-text" style="width: 70px">订单备注：</div>
              <div style="width: 230px">
                <span>{{ orderRemark(record.order) }}</span>
                <!-- <span class="highlight" style="display: inline-block; margin-left: 5px; cursor: pointer"><icon-edit /></span> -->
              </div>
            </div>
          </div>
        </div>
      </template>
    </a-table>

    <div style="position: relative">
      <div style="position: absolute; right: 0; top: 0; width: 380px">
        <div>
          <a-checkbox v-model="notFeed">无需同步物流信息</a-checkbox>
          <div class="text-desc">不需要将物流跟踪号同步到平台上了， 例如该订单在亚马逊平台上已经是发货状态了，就不需要再提交跟踪号信息给亚马逊了</div>
        </div>
        <div v-if="type == '直接出库'">
          <a-checkbox v-model="notOutInventroy">无需扣减产品库存和包装库存</a-checkbox>
          <div class="text-desc">选择该项，将不会去扣减产品和包装的库存数量。</div>
        </div>
      </div>
    </div>

    <div style="text-align: right; margin-top: 140px">
      <a-button class="gray-outline mr10">返回</a-button>
      <a-button type="primary" :loading="btnLoading" @click="handleOk">确认出库</a-button>
    </div>
    <!-- <a-button type="primary" @click="back">back</a-button> -->
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { useVisitedRoutesContext } from '@/store/modules/visited-routes'
  import { useRoute, useRouter } from 'vue-router'
  import { listPackage, completeOutboud } from '@/api/order'
  import { Message } from '@arco-design/web-vue'
  import FilterTable from '@/components/TableFilter.vue'
  export default defineComponent({
    components: {
      FilterTable,
    },
    setup() {
      const visitedStore = useVisitedRoutesContext()
      const route = useRoute()
      const router = useRouter()

      const data: any = reactive({
        filterItem: [
          {
            type: 'input_keyword',
            key: 'outOrderNumberList',
            keyItems: [
              { label: '出库单号', value: 'outOrderNumberList' },
              { label: '物流跟踪号', value: 'trackingNumberList' },
              { label: '平台订单号', value: 'platOrderNumberList' },
            ],
            keyWidth: '120',
            value: ref(),
            placeholder: '请输入',
            label: '出库单号',
            width: 300,
            isMultiple: false,
          },
        ],
        loading: false,
        btnLoading: false,
        tableList: [],
        expandedKeys: [],
        notFeed: false,
        notOutInventroy: false,
        type: route.query.type,
      })

      const outOrderNum = computed(() => {
        return data.tableList.length
      })
      const salerOrderNum = computed(() => {
        let orderList: any = []
        data.tableList.forEach((e: any) => {
          let index = orderList.findIndex((el: any) => e.order.id == el.id)
          if (index == -1) orderList.push(e)
        })
        return orderList.length
      })
      const skuNum = computed(() => {
        let productList: any = []
        let res: any = []
        data.tableList.forEach((e: any) => {
          productList = [...productList, ...e.packageItemList]
        })
        productList.forEach((e: any) => {
          let index = res.findIndex((el: any) => e.productSku == el.productSku)
          if (index == -1) res.push(e)
        })
        return res.length
      })
      const skuOrderNum = computed(() => {
        let productList: any = []
        data.tableList.forEach((e: any) => {
          productList = [...productList, ...e.packageItemList]
        })
        return productList.length
      })

      const back = () => {
        visitedStore.removeVisitedRoute(route)
        router.push('/warehouse/orderOutHouse/salesOutReceipt')
      }

      const searchByVal = (info: any) => {
        let flag = false
        for (const key in info) {
          if (info[key]) {
            flag = true
            break
          }
        }
        if (flag) getList(info)
      }

      const getList = async (info: any) => {
        data.loading = true
        const res = await listPackage(info)
        let arr = res?.data || []
        let newArr = arr.filter((e: any) => {
          if (data.type == '直接出库') {
            return e.status == 'TO_HAND'
          } else {
            return e.status == 'TO_OUTBOUND'
          }
        })
        newArr.forEach((e: any) => {
          let index = data.tableList.findIndex((el: any) => e.id == el.id)
          if (index == -1) {
            data.tableList.push(e)
          }
        })
        data.loading = false
      }

      const getImage = (item: any) => {
        if (item.isCustom) {
          let arr = item.customPics ? item.customPics.split(',') : []
          return arr[0]
        } else {
          return item.productPic
        }
      }

      const orderRemark = (item: any) => {
        let list = item.remarkList || []
        if (list[0]) {
          return list[0].remark
        }
      }
      const filterStatus = (num: number) => {
        let text = ''
        if (num == 201) {
          text = '已退款'
        } else if (num == -200) {
          text = '已退货'
        } else if (num >= -199 && num <= -100) {
          text = '已取消'
        } else if (num >= 200 && num <= 299) {
          switch (num) {
            case 201:
              text = '待审核'
              break
            case 202:
              text = '待发货'
              break
            case 203:
              text = '部分发货'
              break
            case 204:
              text = '多渠道中'
              break
          }
        } else if (num >= 600 && num <= 699) {
          text = ' 已发货'
        } else {
          text = '未知'
        }
        return text
      }

      const handleOk = async () => {
        if (!data.tableList[0]) {
          return Message.error('出库单为必须项')
        }
        let params: any = {
          notFeed: data.notFeed,
          packageIdList: data.tableList.map((e: any) => e.id),
        }
        if (data.type == '直接出库') {
          params.notOutInventroy = data.notOutInventroy
        }
        data.btnLoading = true
        const res: any = await completeOutboud(params)
        if (res.code == 'SUCCESS') {
          Message.success('出库成功')
          back()
        }
        data.btnLoading = false
      }

      getList({ idList: route.query.ids })
      return {
        ...(toRefs(data) as any),
        back,
        searchByVal,
        getImage,
        orderRemark,
        filterStatus,
        handleOk,
        outOrderNum,
        salerOrderNum,
        skuNum,
        skuOrderNum,
      }
    },
  })
</script>

<style lang="less" scoped>
  .text-desc {
    font-size: 10px;
    color: #aaaaaa;
    margin-left: 30px;
  }

  .staticstic {
    height: 30px;
    line-height: 30px;
  }

  .direct-shipment-con {
    height: calc(100vh - @menuHeight);
    background-color: white;
    padding: 10px 20px;
    box-sizing: border-box;
  }
  :deep(.arco-statistic-value) {
    font-size: 14px !important;
    color: red;
  }

  .label-text {
    color: #999999;
    // width: 60px;
  }

  .btn-icon {
    font-size: 24px;
    margin-top: 4px;
    margin-left: 5px;
  }

  .stockout {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid red;
    color: red;
    font-size: 12px;
    border-radius: 5px;
    transform: scale(0.7);
    margin-top: -3px;
  }
  .receipt-con {
    height: calc(100vh - @menuHeight);
    width: 100%;
    .product-item {
      display: flex;
      padding: 10px 30px;
      box-sizing: border-box;
      .left {
        width: 900px;
        .left-item {
          display: flex;
          height: 60px;
          padding: 10px 0;
          box-sizing: border-box;
          width: 100%;
          border-bottom: 1px dashed #d7d7d7;
          &:last-child {
            border-bottom: none;
          }
        }
      }
      .right {
        width: 300px;
        margin-left: 10px;
        border-left: 1px solid #d7d7d7;
        padding: 10px;
        box-sizing: border-box;
      }
    }
  }
</style>
